<template>
  <div class="history">
    <TipsView :icon="Tipsicon" :text="Tipstext" ref="childTips"></TipsView>
    <div class="history-header">
      <div class="left">
        <span>全部粉丝（{{ myfans_total }}）</span>
      </div>
      <div class="right-more" @click.stop="more = !more">
        {{moreTxet}}<i class="iconfont icon-xiajiantou"></i>
        <div class="more-info" v-if="more">
          <div class="info-box">
            <div class="more-list">
              <div class="more-item" v-for="(moreItem,index) in moreList" :key="moreItem.id" @click="checkMore(index)">{{moreItem.text}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="myfollow-user-list">
      <div class="myfollow-tips" style="background: #fff; color: #999; padding: 5px 0;">
        <span style='font-size: 12px; transform: scale(0.833) !important; margin-left: 20px;'>由于部分账号内容不完善，可能仅展示部分用户！</span>
      </div>
      <div class="myfollow-user">
        <div
          class="myfollow-useritems"
          v-for="(item,index) in fansList"
          :key="item.uid"
        >
          <div  class="myfollow-userurl">
            <div class="myfollow-userimg" @click.stop="goUserHome(item.uid)">
              <img :src="item.avatar" :alt="item.username" />
            </div>
            <div class="myfollow-userinfo">
              <div class="userinfo-one" @click.stop="goUserHome(item.uid)">
                {{ item.username }}
                <span><img src="" alt="" /></span>
              </div>
              <div class="userinfo-two">
                <p v-if="item.introduce === ''">暂无简介</p>
                <p v-else>{{ item.introduce }}</p>
              </div>
              <div class="userinfo-three">粉丝 {{ item.fans_count }}</div>
            </div>
          </div>
          <div class="myfollow-button" @click.stop='showItemMore(item.uid,index)'  >
            <div class="other"><i class="iconfont icon-qita"></i></div>
            <div class="other-more" v-if="item.itemMore" >
              <div class="info-box">
                <div class="close">
                  <i
                    class="iconfont icon-guanbi"
                    title="关闭"
                    @click.stop="item.itemMore=false"
                  ></i>
                </div>
                <div class="more-list">
                  <div class="more-item" v-if="followState.fllow_mutual" @click.stop="removeFollow(item.uid,index)">互粉</div>
                  <div class="more-item" v-else  @click.stop="addFans(item.uid,index)">回粉</div>

                  <div class="more-item" @click="removeFans(item.uid,index)">移除粉丝</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box">
          <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import scroll from '@/util/scroll'
import { mapState, mapMutations } from 'vuex'
// import Consider from '@/components/utilView/considerView.vue'
import TipsView from '@/components/utilView/tipView.vue'
import Loading from '@/components/utilView/loadingView.vue'
export default {
  components: {

    TipsView,
    Loading
  },
  data () {
    return {
      more: false, // 粉丝列表排序 选项显示
      moreTxet: '粉丝数倒序', //
      moreList: [ // 排序选项内容
        {
          id: 1,
          text: '粉丝数倒序'
        },
        {
          id: 2,
          text: '关注时间倒序'
        }
      ],
      myfans_total: 0, // 粉丝的总数
      page: 1, // 粉丝列表的页码数量
      fansList: [], // 粉丝列表数据
      nid: null, // 点击移出粉丝的粉丝用户id
      cruntIndex: null, // 移出粉丝的下标
      Tipsicon: 'icon-duigoux', // 提示的图标
      Tipstext: '', // 提示的文字信息
      followState: {}, // 关注的状态
      titleText: '', // 弹出框标题
      texts: '', // 弹出框正文
      ejectState: '', // 弹出框的确认是进行哪个操作的状态
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示
    }
  },

  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    http.userfans(this.user.uid, this.page, 0).then((res) => {
      console.log(res.data)
      this.fansList = res.data.data.fansList
      this.myfans_total = res.data.data.myfans_total
      // 判断是否还有足够数据
      if (res.data.data.fansList.length < 10) {
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
      }
      this.page++ // 页码自增
    })
  },
  computed: {
    ...mapState(['user', 'removeFansState']),
    FansState () {
      return this.removeFansState
    }

  },
  watch: {
    FansState () {
      this.removeFansBefore()
    }
  },
  methods: {
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值

      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.userfans(this.user.uid, this.page, 0).then((res) => {
              this.fansList = this.fansList.concat(res.data.data.fansList)
              console.log(this.fansList)
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.data.fansList.length < 10) {
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 增加一页
              this.page++
            })
          }
        }
      }
    },
    ...mapMutations(['meshowConsider', 'handerConsiderData']),
    // // 提示信息 方法
    tipsMethod (text) {
      // text是提示消息文字
      this.$refs.childTips.HanderTiming(1000) // 显示提示框方法 可以传递需要显示的事件参数  显示1秒
      this.Tipstext = text // 传递提示消息
    },
    // 显示粉丝排序方式
    moreShow () {
      if (!this.more) {
        this.more = !this.more
      } else {
        this.more = false
      }
    },
    // 切换粉丝的排序方式
    checkMore (index) {
      console.log(index)
      this.page = 1
      if (index === 0) {
        this.moreTxet = '粉丝数倒序'
        http.userfans(this.user.uid, this.page, 0).then((res) => {
          console.log(res.data)
          this.fansList = res.data.data.fansList
          this.myfans_total = res.data.data.myfans_total
        })
      } else if (index === 1) {
        this.moreTxet = '关注时间倒序'
        http.userfans(this.user.uid, this.page, 1).then((res) => {
          console.log(res.data)
          this.fansList = res.data.data.fansList
          this.myfans_total = res.data.data.myfans_total
        })
      }
    },
    // 显示与单个粉丝关注的状态
    showItemMore (id, index) {
      // id列表当前选中的用户id
      http.userfollowState(this.user.uid, id).then(res => {
        console.log(res.data)
        this.followState = res.data.data
        this.fansList[index].itemMore = true
      })
    },
    // 取消关注的逻辑
    removeFollow (id, index) {
      this.fansList[index].itemMore = false // 弹出选择框时隐藏每个粉丝的选项框
      this.handerConsiderData({ type: 'removeFollowTwo', text: '确定不再关注此人？', nid: id })
      this.ejectState = 'removeFollow' // 标注当前是取消关注的弹出框状态
      this.meshowConsider(true) // 显示弹出框
      // this.titleText = '' // 标题
      // this.texts = '确定不再关注此人？' // 正文
      // console.log(id, index)
      this.cruntIndex = index // 保存了当前点击取消关注的用户项的下标
      // this.nid = id // 保存当前点击取消的用户的id
    },
    // 点击移除粉丝按钮
    removeFans (id, index) {
      this.fansList[index].itemMore = false // 弹出选择框时隐藏每个粉丝的选项框
      this.handerConsiderData({ type: 'removeFans', title: '确认要移除粉丝', text: '对方将不再关注你，且不会收到通知', nid: id })
      this.ejectState = 'removeFans' // 标注当前是移除粉丝的弹出框状态
      this.meshowConsider(true) // 弹出选择框
      // this.titleText = '确认要移除粉丝' // 标题
      // this.texts = '对方将不再关注你，且不会收到通知' // 正文
      // this.nid = id // 将需要移除的粉丝id保存
      this.cruntIndex = index // 将需要移除的粉丝行的下标保存

      // console.log(this.fansList[index].itemMore)
    },
    // 移除粉丝成功之后
    removeFansBefore () {
      this.fansList.splice(this.cruntIndex, 1)
    },
    // 回粉
    addFans (id, index) {
      this.fansList[index].itemMore = false
      http.getfollow(this.user.uid, id, 1).then(res => {
        console.log(res.data)
        if (res.data.ok === 0) {
          // 失败
          this.tipsMethod(res.data.message)
        } else if (res.data.ok === 1) {
          // 成功
          this.tipsMethod(res.data.message)
        }
      })
    },
    // 跳转到其他用户的个人主页
    goUserHome (uuid) {
      this.$router.push({ path: '/home/userHome', query: { uuid: uuid } })
    }

  },

  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true)// 销毁滚动事件
    console.log('结束滚动')
  }
}
</script>

<style lang="scss" scoped>
// 引入基础配置
@use "@/styles/init" as h;
.history {
  width: 100% ;

  height: auto;
  min-height: 600px;

  .history-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    background: white;
    padding: 5px 0;
    justify-content: space-between;
    border-radius: 5px;
    border-bottom: 1px solid rgb(241, 241, 241);
    .left {
      color: #666;
      span {
        cursor: pointer;
        padding: 0 5px;
        width: 120px;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
      }
    }
    .right-more {
      margin-right: 12px;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      position: relative;

      .more-info {
        z-index: 21;
        position: absolute;
        background: #fff;
        border-radius: 5px;
        left: -50px;
        width: 120px;
        overflow: hidden;
        box-shadow: 2px 2px 5px rgb(224, 224, 224),
          -2px -2px 5px rgb(224, 224, 224);
        .info-box {

          .more-list {
            width: 100%;
            .more-item {
              text-align: center;
              font-size: 12px;
              padding: 5px 0;
              cursor: pointer;
              &:hover {
                color: #c6c6c6;
              }
            }
          }
        }
      }
    }
  }
  .myfollow-user-list {
    width: 100%;
    height: auto;
    .myfollow-user {
      width: 100%;
      // min-height: 70px;
      // background: #fff;

      .myfollow-useritems {
        width: 100%;
        min-height: 70px;
        background: #fff;
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:hover {
          background: #eee;
        }

        .myfollow-userurl {
          text-decoration: none;
          color: #333;
          display: flex;
          align-items: center;
          margin-left: 20px;

          .myfollow-userimg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            background: #666;
            cursor: pointer;
            img {
              z-index: 1;
              width: 100%;
              &:hover{
                filter: brightness(70%);
              }
            }
          }
          .myfollow-userinfo {
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            .userinfo-one {
              font-weight: bold;
              display: flex;
              align-items: center;
              cursor: pointer;
            }
            .userinfo-two {
              color: #666;
              p {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
              }
            }
            .userinfo-three {
              color: #666;
            }
          }
        }
        .myfollow-button {

          margin-right: 40px;
          display: flex;
          align-items: center;
          position: relative;
          .other {
            margin-left: 15px;
            cursor: pointer;
            z-index: 9;
          }
          .other-more {
            position: absolute;
            top: 15px;
            left: -50%;
            width: 80px;
            min-height: 40px;
            background: #fff;
            box-shadow: 2px 2px 5px rgb(224 224 224),
              -2px -2px 5px rgb(224 224 224);
            border-radius: 5px;
            .info-box {
              padding: 5px 0;
              .close {
                display: flex;
                justify-content: flex-end;
                font-size: 12px;
                padding-right: 5px;
                i{
                  cursor: pointer;
                }
              }
              .more-list {
                width: 100%;
                .more-item {
                  cursor: pointer;
                  text-align: center;
                  font-size: 12px;
                  padding: 5px 0;
                  &:hover {
                    background: h.$background-color;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 540px) {
  .history {
  width: 11.22rem;
  height: auto;
  min-height: 600px;

  .history-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: .2rem;
    display: flex;
    background: white;
    padding: 5px 0;
    justify-content: space-between;
    border-radius: 5px;
    border-bottom: 1px solid rgb(241, 241, 241);
    .left {
      color: #666;
      span {
        cursor: pointer;
        padding: 0 5px;
        width: 120px;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
      }
    }
    .right-more {
      margin-right: 12px;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      position: relative;

      .more-info {
        z-index: 21;
        position: absolute;
        background: #fff;
        border-radius: 5px;
        left: -50px;
        width: 120px;
        overflow: hidden;
        box-shadow: 2px 2px 5px rgb(224, 224, 224),
          -2px -2px 5px rgb(224, 224, 224);
        .info-box {

          .more-list {
            width: 100%;
            .more-item {
              text-align: center;
              font-size: 12px;
              padding: 5px 0;
              cursor: pointer;
              &:hover {
                color: #c6c6c6;
              }
            }
          }
        }
      }
    }
  }
  .myfollow-user-list {
    width: 100%;
    height: auto;
    .myfollow-user {
      width: 100%;
      // min-height: 70px;
      // background: #fff;

      .myfollow-useritems {
        width: 100%;
        min-height: 70px;
        background: #fff;
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:hover {
          background: #eee;
        }

        .myfollow-userurl {
          text-decoration: none;
          color: #333;
          display: flex;
          align-items: center;
          margin-left: .17rem;

          .myfollow-userimg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            background: #666;
            cursor: pointer;
            img {
              z-index: 1;
              width: 100%;
              &:hover{
                filter: brightness(70%);
              }
            }
          }
          .myfollow-userinfo {
            font-size: 12px;
            line-height: 16px;
            margin-left: .17rem;
            flex: 1;
            .userinfo-one {
              font-weight: bold;
              display: flex;
              align-items: center;
              cursor: pointer;
            }
            .userinfo-two {
              color: #666;
              p {
                width: 100%;
                white-space: normal;
                overflow: hidden;
              }
            }
            .userinfo-three {
              color: #666;
            }
          }
        }
        .myfollow-button {

          margin-right: 40px;
          display: flex;
          align-items: center;
          position: relative;
          .other {
            margin-left: 15px;
            cursor: pointer;
            z-index: 9;
          }
          .other-more {
            position: absolute;
            top: 15px;
            left: -50%;
            width: 80px;
            min-height: 40px;
            background: #fff;
            box-shadow: 2px 2px 5px rgb(224 224 224),
              -2px -2px 5px rgb(224 224 224);
            border-radius: 5px;
            .info-box {
              padding: 5px 0;
              .close {
                display: flex;
                justify-content: flex-end;
                font-size: 12px;
                padding-right: 5px;
                i{
                  cursor: pointer;
                }
              }
              .more-list {
                width: 100%;
                .more-item {
                  cursor: pointer;
                  text-align: center;
                  font-size: 12px;
                  padding: 5px 0;
                  &:hover {
                    background: h.$background-color;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
}
</style>
